import { Button } from 'antd';
import { useTranslation } from 'react-i18next';
import { Select, Space } from 'antd';

function Index() {
  const { t, i18n } = useTranslation();
  const qh = () => {
    i18n.changeLanguage(i18n.language === 'en' ? 'zh' : 'en')
    localStorage.setItem('lang', 'zh')
  }
  const handleChange = (value: string) => {
    document.documentElement.setAttribute('data-theme',value)
    localStorage.setItem('theme',value)
  };
  return (
    <div>
       <Select
      defaultValue="白色"
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
        { value: 'dark', label: '黑色' },
        { value: 'bai', label: '白色' },
        { value: 'pink', label: '粉色' },
        { value: 'disabled', label: 'Disabled', disabled: true },
      ]}
    />
      <div className='w-[650px] h-[650px] bg-amber-50 text-black
      dark:bg-black dark:text-white bai:bg-white bai:text-balck
      pink:bg-pink-200 pink:text-pink-900
      '>
        <Button onClick={qh}>切换语言</Button>
        <h1>i18n</h1>
        <h1>{t('Welcome to React')}</h1>
        <h1>{t('Home')}</h1>
      </div>
    </div>
  )
}

export default Index
